<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>一朵 - 充值</title>

    <!-- swiper-2.7css -->

    <link rel="stylesheet" href="__STATIC__/index/js/swiper/idangerous.swiper.css">

    <!-- swiper-2.7js -->

    <script src="__STATIC__/index/js/swiper/idangerous.swiper.min.js"></script>

    <!-- jquery-3.2.1引用 -->

    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>

    <!-- 阿里巴巴矢量图库 -->

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_yjrug4qch00be29.css">

    <!-- 公共头部 脚部 -->

    <link rel="stylesheet" href="__STATIC__/index/css/global/global.css">

    <!-- 超过1200屏幕 -->

    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/pay/pay1200.css" />

    <!-- 1080-1200 -->

    <link rel="stylesheet" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/pay/pay1080.css"
    />

    <!-- 960-1080 -->

    <link rel="stylesheet" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/pay/pay960.css"
    />

    <!-- 768-959 -->

    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/pay/pay768.css"
    />

    <!-- 568-767 -->

    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/pay/pay568.css"
    />

    <!-- 375-567 -->

    <link rel="stylesheet" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/pay/pay375.css"
    />

    <!-- 小于375-->

    <link rel="stylesheet" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/pay/pay320.css" />

    <!--一引入layer-->

    <script src="__STATIC__/layer/layer.js"></script>

</head>



<body>

    <form id="form1" action="{:url('User/recharge')}" method="post">

        <div class="M">

            <div class="m-header">

                <div>

                    <span onclick="go_back();">

                        <span class="iconfont icon-xiangzuo"></span>

                        返回

                    </span>

                    <span>会员充值</span>

                    <span>

                        {if condition="!empty($realname)"}

                        <a href="{:url('User/index')}" class="my">

                            {$realname}

                        </a>

                        {else /}

                        <a href="{:url('Login/loginin')}">登录</a>

                        <a href="{:url('Login/register')}">注册</a>

                        {/if}

                        <a href="{:url('MyCart/my_cart')}" class="car">

                            <span class="iconfont icon-gouwuche"></span>

                            <span>{$cart_num}</span>

                        </a>

                    </span>

                </div>



            </div>

            <div class="m-balance">

                <a href="{:url('User/user_credit_log')}">

                    <p>{$user.user_money}</p>

                    <p>余额</p>

                </a>

                <a href="{:url('User/user_credit_log')}">

                    <span>

                        <i class="iconfont icon-zhangdan"></i>

                        账单

                    </span>

                </a>

            </div>

            <div class="m-money">

                <div class="m-money-content">

                    <p class="m-equities">

                        <span>

                            <span>注意</span> 一次性充值送会员（不计算累计充值）</span>

                        <span>

                            <a href="{:url('User/quanyi')}">查看会员权益</a>

                        </span>

                    </p>

                    {foreach name="list" item="v"} {if condition="$v.id neq 1"}

                    <div class="m-member m_pay_{$v.id}" data-id="{$v.id}">

                        <p>

                            <span>充值{$v.score}</span>

                            <span>

                                <span>送</span>

                                <img class="" src="{$v.logo}" alt="">

                                <span>{$v.title}</span>

                            </span>

                        </p>

                    </div>

                    {/if} {/foreach}

                    <div class="m-custom">

                        <span>

                            自定义金额

                        </span>

                        <input type="text" name="price" class="m-zidingyi" placeholder="请输入金额" onkeyup="put_price(this)">

                    </div>

                </div>

            </div>



            <div class="m-pay">

                <div>

                    {if condition="$is_weixin eq 0"}

                    <p class="M-pay m_pay_type_1" data-id="1">

                        <span>支付宝支付</span>

                        <span>

                            <img src="__STATIC__/index/img/order/pay.png" alt="">

                        </span>

                    </p>

                    {/if}

                    <p class="M-pay m_pay_type_2" data-id="2">

                        <span>微信支付</span>

                        <span>

                            <img src="__STATIC__/index/img/order/pay.png" alt="">

                        </span>

                    </p>

                </div>



            </div>

            <a href="javascript:;" class="m-bottom" onclick="check_form();">提交</a>

        </div>

        <!------------------------ PC ------------------------>



        <div class="PC">

            <!-- 公共头部 -->

            {include file="public/p_header" /}

            <!-- 公共头部结束 -->

            <div class="pc-content">

                <div class="PC_left">

                    <div>

                        <img src="{if condition='!empty($user.logo)'} {$user.logo} {else /} __STATIC__/index/touxiang.png{/if}" alt="">

                    </div>

                </div>

                <div class="PC_right">

                    {include file="public/p_user_info" /}

                </div>

            </div>

            <div class="pc-headline">

                <p>充值中心</p>

            </div>

            <div class="pc-pay-content">

                {foreach name="list" item="v"}

                <div class="p_pay_{$v.id} p_pay" data-id="{$v.id}">

                    <div>

                        <img src="{$v.logo}" alt="" class="pc-zuanshi-img">

                    </div>

                    {if condition="$v.id neq 1"}

                    <p>充值{$v.score}</p>

                    {else /}

                    <p>注册尊享</p>

                    {/if}

                    <p>获得</p>

                    <div>

                        <p>{$v.title}</p>

                    </div>

                    <div>

                        <p>

                            {$v.detail}

                        </p>

                    </div>

                    <p>

                        {if condition="$v.id neq 1"}

                        <a href="javascript:;" onclick="choose_type({$v.id});">选择</a>

                        {else /}

                        <span>注册尊享</span>

                        {/if}

                    </p>

                </div>

                {/foreach}

            </div>

            <div class="pc-money">

                <p>自定义金额

                    <input type="text" name="price" class="p-zidingyi" placeholder="请输入自定义金额" onkeyup="put_price(this)">

                </p>

            </div>

            <div class="pc-pay">

                <i class="iconfont icon-tubiaolunkuo-"></i>

                <label for="zhifubao">

                    <input id="zhifubao" type="radio" value="1" name="pay" class="p_pay_type_1" onchange="change_pay_type(1)">

                    <img src="__STATIC__/index/img/order/zhifubao.png" alt="">

                </label>

                {if condition="$is_mobile eq 0"}

                <label for="weixin">

                    <input id="weixin" type="radio" value="2" name="pay" class="p_pay_type_1" onchange="change_pay_type(2)">

                    <img src="__STATIC__/index/img/order/weixin.png" alt="">

                </label>

                {/if}

            </div>

            <div class=" pc-tijiao">

                <p>

                    <a href="javascript:;" onclick="check_form()">确认充值</a>

                    <i class="iconfont icon-gantanhao"></i>

                    <span>

                        一次性充值获得会员，充值不累计

                    </span>

                </p>

            </div>

            <!-- 公共脚部  -->

            {include file="public/p_footer" /}

            <!-- 公共脚部 结束 -->

        </div>

        <input type="hidden" name="pay_type">

        <input type="hidden" name="type_id">

    </form>

    <script>
        $(function () {

            $('.m-member').click(function () { //切换支付类型

                var id = $(this).attr('data-id');

                $('.m-member').removeClass('m-zhong');

                $(this).addClass('m-zhong');

                $('.p_pay').removeClass('p_cur_pay');

                $('.p_pay_' + id).addClass('p_cur_pay');

                $('input[name=type_id]').val(id);

                $('input[name=price]').val('');

            });

            $('.M-pay').click(function () { //切换支付方式

                var id = $(this).attr('data-id');

                $('.M-pay').removeClass('m-pay-zhong');

                $(this).addClass('m-pay-zhong');

                $('input[name=pay_type]').val($(this).attr('data-id'));

                //                $('input[type=radio]').eq(0).checked = true;

                //                console.log($('input[type=radio][checked]').val());

            });



        });
    </script>

    <script>
        /**
         * 返回上一页
         */

        function go_back() {

            window.history.back(); //返回上一页

        }



        /**

         * 选择充值类型

         * 2018-05-02

         */

        function choose_type(id) {
            $('.p_pay').removeClass('p_cur_pay'); //移除pc端
            $('.m-member').removeClass('m-zhong'); //移除移动端
            $('.p_pay_' + id).addClass('p_cur_pay');
            $('.m_pay_' + id).addClass('m-zhong');
            $('input[name=type_id]').val(id);
            $('input[name=price]').val('');
        }

        /**

         * 改变支付方式

         */

        function change_pay_type(id) {

            $('input[name=pay_type]').val(id);

            $('.M-pay').removeClass('m-pay-zhong');

            $('.m_pay_type_' + id).addClass('m-pay-zhong');
            $('input[name=price]').val('');
        }

        /**

         * 输入金额

         * @param obj

         */

        function put_price(obj) {

            $('.m-member').removeClass('m-zhong');

            $('.p_pay').removeClass('p_cur_pay');

            var price = $(obj).val();

            console.log(price);

            $('input[name=price]').val(price);

            $('input[name=type_id]').val('');

//            $('input[name=price]').val('');

        }

        /**

         * 检查订单

         */

        function check_form() {
            var reg = /^\d+(\.\d{1,2})?$/;
            var pay_type = $('input[name=pay_type]').val();
            var type_id = $('input[name=type_id]').val();
            var price = $('input[name=price]').val();
            if (type_id == '') {
                if (price == '') {
                    layer.msg('请输入充值金额', {
                        icon: 2,
                        time: 1500,
                        shade: 0.1
                    }, function (index) {
                        layer.close(index);
                    });

                    return false;

                }

                if (!reg.test($.trim(price))) {

                    layer.msg('充值金额输入有误，请重新输入', {
                        icon: 2,
                        time: 1500,
                        shade: 0.1
                    }, function (index) {

                        layer.close(index);

                    });

                    return false;

                }

            }



            if (pay_type == '') {

                layer.msg('请选择支付方式', {
                    icon: 2,
                    time: 1500,
                    shade: 0.1
                }, function (index) {

                    layer.close(index);

                });

                return false;

            }

            $('#form1').submit();

        }



        /**

         * 完善会员信息

         */

        function edit_member_info() {

            window.location.href = "{:url('User/my_center')}";

        }
    </script>

</body>

</html>